<script setup lang="ts">
/*========================================>( 模板属性 )<========================================*/
const selectedIndexs = ref<Array<number>>([])
/*========================================>( 作用域属性 )<========================================*/
const _config = [
    {
        contains: [1],
        value: [1]
    },
    {
        contains: [1, 2],
        value: [2]
    },
    {
        contains: [1, 2, 3],
        value: [3]
    },
    {
        contains: [1, 4],
        value: [1, 1]
    },
    {
        contains: [1, 2, 4, 5],
        value: [2, 2]
    },
    {
        contains: [1, 2, 3, 4, 5, 6],
        value: [3, 3]
    },
    {
        contains: [1, 4, 7],
        value: [1, 1, 1]
    },
    {
        contains: [1, 2, 4, 5, 7, 8],
        value: [2, 2, 2]
    },
    {
        contains: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        value: [3, 3, 3]
    }
]
/*========================================>( dom属性 )<========================================*/
const domEle = ref()

/*========================================>( 定义子传父 )<========================================*/
const emits = defineEmits(['change'])

/*========================================>( 监听函数 )<========================================*/
//监听格子点击
const handleLayoutsClick = (index: number) => {
    const mark = index - 1
    emits('change',_config[mark].value)
}

/*========================================>( 钩子 )<========================================*/
onMounted(() => {
    domEle.value.forEach((element:any) => {
        element.addEventListener('mouseenter', function (event:any) {
            const mark = Number(event.srcElement.dataset.id) - 1
            selectedIndexs.value = _config[mark].contains
        });
    });
})
</script>
<template>
    <div class="component-container layouts">
        <div v-for="item in 9" class="ele" :key="item" :class="{ selected: selectedIndexs.includes(item) }" ref="domEle"
            :id="'ele' + item" :data-id="item" @click="handleLayoutsClick(item)"></div>
    </div>
</template>
<style lang="scss"></style>
<style lang="scss" scoped>
.component-container.layouts {
    position: absolute;
    z-index: 1;
    top: 65px;
    left: 35px;
    width: 120px;
    height: 120px;
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;

    .ele {
        box-sizing: border-box;
        float: left;
        width: 40px;
        height: 40px;
        border: solid 1px #ccc;
        cursor: pointer;

        &.selected {
            background-color: #666;
        }
    }
}
</style>